<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>停车管理 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .tab-item {
            padding: 12px 0;
            font-size: 15px;
            font-weight: 500;
            color: #6b7280;
            text-align: center;
            position: relative;
        }
        
        .tab-item.active {
            color: #3b82f6;
            font-weight: 600;
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #3b82f6;
            border-radius: 3px;
        }
        
        .tab-item.dark {
            color: #9ca3af;
        }
        
        .tab-item.active.dark {
            color: #60a5fa;
        }
        
        .tab-item.active.dark::after {
            background-color: #60a5fa;
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-badge-green {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }
        
        .status-badge-red {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .status-badge-green.dark {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .status-badge-yellow.dark {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .status-badge-red.dark {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .parking-spot {
            width: 40px;
            height: 60px;
            margin: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            border-radius: 6px;
            position: relative;
        }
        
        .parking-spot::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 10px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        .parking-spot.dark::before {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .parking-spot-available {
            background-color: #dcfce7;
            color: #166534;
            border: 1px solid #86efac;
        }
        
        .parking-spot-occupied {
            background-color: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }
        
        .parking-spot-reserved {
            background-color: #fef3c7;
            color: #92400e;
            border: 1px solid #fcd34d;
        }
        
        .parking-spot-available.dark {
            background-color: rgba(22, 101, 52, 0.2);
            color: #86efac;
            border: 1px solid rgba(134, 239, 172, 0.3);
        }
        
        .parking-spot-occupied.dark {
            background-color: rgba(153, 27, 27, 0.2);
            color: #fca5a5;
            border: 1px solid rgba(252, 165, 165, 0.3);
        }
        
        .parking-spot-reserved.dark {
            background-color: rgba(146, 64, 14, 0.2);
            color: #fcd34d;
            border: 1px solid rgba(252, 211, 77, 0.3);
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
        
        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 4px;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .tab-item {
            color: #9ca3af;
        }
        
        .dark-mode .tab-item.active {
            color: #60a5fa;
        }
        
        .dark-mode .tab-item.active::after {
            background-color: #60a5fa;
        }
        
        .dark-mode .status-badge-green {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark-mode .status-badge-yellow {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }
        
        .dark-mode .status-badge-red {
            background-color: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }
        
        .dark-mode .parking-spot::before {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .parking-spot-available {
            background-color: rgba(22, 101, 52, 0.2);
            color: #86efac;
            border: 1px solid rgba(134, 239, 172, 0.3);
        }
        
        .dark-mode .parking-spot-occupied {
            background-color: rgba(153, 27, 27, 0.2);
            color: #fca5a5;
            border: 1px solid rgba(252, 165, 165, 0.3);
        }
        
        .dark-mode .parking-spot-reserved {
            background-color: rgba(146, 64, 14, 0.2);
            color: #fcd34d;
            border: 1px solid rgba(252, 211, 77, 0.3);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">停车管理</div>
                <div class="w-16 flex justify-end">
                    <i class="fas fa-ellipsis-h text-blue-500 dark:text-blue-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 停车场状态卡片 -->
            <div class="px-4 pt-4 pb-3">
                <div class="glass-card p-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">A区停车场</div>
                        <div class="status-badge status-badge-green">运行正常</div>
                    </div>
                    <div class="grid grid-cols-3 gap-4 mb-4">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-gray-800 dark:text-gray-200">128</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">总车位</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-green-600 dark:text-green-400">42</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">空闲车位</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-red-600 dark:text-red-400">86</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">已占车位</div>
                        </div>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 67%"></div>
                    </div>
                    <div class="flex justify-between mt-1">
                        <div class="text-xs text-gray-500 dark:text-gray-400">使用率: 67%</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">更新于: 5分钟前</div>
                    </div>
                </div>
            </div>
            
            <!-- 我的车辆 -->
            <div class="px-4 pt-3 pb-4">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200">我的车辆</h2>
                    <button class="text-sm text-blue-500 dark:text-blue-400 flex items-center">
                        添加车辆 <i class="fas fa-plus ml-1"></i>
                    </button>
                </div>
                <div class="glass-card p-4 mb-3">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
                                <i class="fas fa-car text-blue-500 dark:text-blue-400"></i>
                            </div>
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">京A12345</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">白色 · 特斯拉 Model 3</div>
                            </div>
                        </div>
                        <div class="status-badge status-badge-green">已入场</div>
                    </div>
                    <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-clock mr-1"></i> 入场时间: 今天 08:30
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-map-marker-alt mr-1"></i> 位置: A区-B2-042
                            </div>
                        </div>
                    </div>
                </div>
                <div class="glass-card p-4">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
                                <i class="fas fa-car text-purple-500 dark:text-purple-400"></i>
                            </div>
                            <div>
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200">京B67890</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">黑色 · 奔驰 GLC</div>
                            </div>
                        </div>
                        <div class="status-badge status-badge-yellow">未入场</div>
                    </div>
                    <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-calendar-check mr-1"></i> 月卡有效期: 2023-12-31
                            </div>
                            <button class="text-xs text-blue-500 dark:text-blue-400">
                                续费 <i class="fas fa-arrow-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 选项卡 -->
            <div class="bg-white dark:bg-gray-800 border-t border-b border-gray-200 dark:border-gray-700">
                <div class="flex">
                    <div class="tab-item active flex-1">车位查询</div>
                    <div class="tab-item flex-1">缴费记录</div>
                    <div class="tab-item flex-1">访客停车</div>
                </div>
            </div>
            
            <!-- 车位查询内容 -->
            <div class="px-4 py-4">
                <!-- 楼层选择 -->
                <div class="flex justify-between mb-4">
                    <button class="px-4 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm rounded-lg">
                        B1层
                    </button>
                    <button class="px-4 py-1.5 bg-blue-500 dark:bg-blue-600 text-white text-sm rounded-lg">
                        B2层
                    </button>
                    <button class="px-4 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm rounded-lg">
                        B3层
                    </button>
                    <button class="px-4 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm rounded-lg">
                        地面层
                    </button>
                </div>
                
                <!-- 图例 -->
                <div class="flex mb-4">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #dcfce7; border: 1px solid #86efac;"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">空闲</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #fee2e2; border: 1px solid #fca5a5;"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">已占</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #fef3c7; border: 1px solid #fcd34d;"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">预留</span>
                    </div>
                </div>
                
                <!-- 停车位地图 -->
                <div class="glass-card p-4 overflow-x-auto">
                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-3">B2层 - 区域A</div>
                    <div class="min-w-max">
                        <!-- 车位行 1 -->
                        <div class="flex mb-2">
                            <div class="parking-spot parking-spot-occupied">A01</div>
                            <div class="parking-spot parking-spot-occupied">A02</div>
                            <div class="parking-spot parking-spot-occupied">A03</div>
                            <div class="parking-spot parking-spot-available">A04</div>
                            <div class="parking-spot parking-spot-available">A05</div>
                            <div class="parking-spot parking-spot-occupied">A06</div>
                            <div class="parking-spot parking-spot-occupied">A07</div>
                            <div class="parking-spot parking-spot-occupied">A08</div>
                        </div>
                        
                        <!-- 通道 -->
                        <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-md mb-2 flex items-center justify-center">
                            <span class="text-sm text-gray-500 dark:text-gray-400">通道</span>
                        </div>
                        
                        <!-- 车位行 2 -->
                        <div class="flex mb-2">
                            <div class="parking-spot parking-spot-occupied">B01</div>
                            <div class="parking-spot parking-spot-occupied">B02</div>
                            <div class="parking-spot parking-spot-available">B03</div>
                            <div class="parking-spot parking-spot-available">B04</div>
                            <div class="parking-spot parking-spot-reserved">B05</div>
                            <div class="parking-spot parking-spot-reserved">B06</div>
                            <div class="parking-spot parking-spot-occupied">B07</div>
                            <div class="parking-spot parking-spot-occupied">B08</div>
                        </div>
                        
                        <!-- 车位行 3 -->
                        <div class="flex">
                            <div class="parking-spot parking-spot-occupied">C01</div>
                            <div class="parking-spot parking-spot-occupied">C02</div>
                            <div class="parking-spot parking-spot-occupied">C03</div>
                            <div class="parking-spot parking-spot-occupied">C04</div>
                            <div class="parking-spot parking-spot-available">C05</div>
                            <div class="parking-spot parking-spot-available">C06</div>
                            <div class="parking-spot parking-spot-available">C07</div>
                            <div class="parking-spot parking-spot-occupied">C08</div>
                        </div>
                    </div>
                    
                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200 mt-6 mb-3">B2层 - 区域B</div>
                    <div class="min-w-max">
                        <!-- 车位行 1 -->
                        <div class="flex mb-2">
                            <div class="parking-spot parking-spot-occupied">D01</div>
                            <div class="parking-spot parking-spot-occupied">D02</div>
                            <div class="parking-spot parking-spot-occupied">D03</div>
                            <div class="parking-spot parking-spot-occupied">D04</div>
                            <div class="parking-spot parking-spot-occupied">D05</div>
                            <div class="parking-spot parking-spot-occupied">D06</div>
                            <div class="parking-spot parking-spot-occupied">D07</div>
                            <div class="parking-spot parking-spot-occupied">D08</div>
                        </div>
                        
                        <!-- 通道 -->
                        <div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-md mb-2 flex items-center justify-center">
                            <span class="text-sm text-gray-500 dark:text-gray-400">通道</span>
                        </div>
                        
                        <!-- 车位行 2 -->
                        <div class="flex mb-2">
                            <div class="parking-spot parking-spot-available">E01</div>
                            <div class="parking-spot parking-spot-available">E02</div>
                            <div class="parking-spot parking-spot-available">E03</div>
                            <div class="parking-spot parking-spot-available">E04</div>
                            <div class="parking-spot parking-spot-occupied">E05</div>
                            <div class="parking-spot parking-spot-occupied">E06</div>
                            <div class="parking-spot parking-spot-occupied">E07</div>
                            <div class="parking-spot parking-spot-occupied">E08</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .parking-spot, .parking-spot-available, .parking-spot-occupied, .parking-spot-reserved').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .parking-spot, .parking-spot-available, .parking-spot-occupied, .parking-spot-reserved').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .tab-item, .status-badge-green, .status-badge-yellow, .status-badge-red, .parking-spot, .parking-spot-available, .parking-spot-occupied, .parking-spot-reserved').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 